<template>
  <div class="hm-login">
    <hm-header>登录</hm-header>
    <hm-log></hm-log>
    <hm-input
      type="text"
      v-model="username"
      :rule="/^1\d{4,10}$/"
      message="账号格式正确"
      ref="username"
      placeholder="请输入用户名"
    ></hm-input>
    <hm-input
      type="password"
      v-model="password"
      :rule="/^\d{3,12}$/"
      message="密码格式不正确"
      ref="password"
      placeholder="请输入密码"
    ></hm-input>
    <hm-button @click="click">登录</hm-button>
    <div class="go-register">
      没有账号？去
      <router-link to="/register" class="link">注册</router-link>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    this.username = this.$route.params.username;
    this.password = this.$route.params.password;
  },
  data() {
    return {
      username: "",
      password: ""
    };
  },
  methods: {
    click() {
      if (!this.$refs.username.validate(this.username)) {
        return;
      }
      if (!this.$refs.password.validate(this.password)) {
        return;
      }
      this.$axios({
        method: "post",
        url: "/login",
        data: {
          username: this.username,
          password: this.password
        }
      }).then(res => {
        console.log(res.data);
        if (res.data.statusCode === 200) {
          this.$toast.success("登录成功");
          this.$router.push("/user");
        } else {
          this.$toast.fail("用户名或者密码错误");
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.go-register {
  padding: 0 20px;
  font-size: 18px;
  text-align: right;
  .link {
    color: orange;
  }
}
</style>
